<script setup>
	import {
		ref
	} from "vue";
	import {
		getMyExaminationApi
	} from "@/api/reserve";
	import {
		useUserStore
	} from "@/store/user";
	import {
		imgUrl
	} from "@/utils/global";
	import {
		onLoad,
		onPullDownRefresh,
		onShow
	} from "@dcloudio/uni-app";
	import {
		nextTick
	} from "vue";

	const showQuick = ref(false);

	onLoad((options) => {
		if (typeof options.quick !== 'undefined') {
			showQuick.value = Number(options.quick) === 1;
		}
	});

	onPullDownRefresh(async () => {
		await nextTick();
		await getMyExamination();
		uni.stopPullDownRefresh();
	});

	const userStore = useUserStore();
	const typeList = ref([
		// {
		//   name: "卡密预约",
		//   path: "/pages/reserve/bind/index?type=0",
		//   bgColor: "linear-gradient( 154deg, #FFC500 0%, #FF9413 100%);",
		// },
		{
			name: "企业预约",
			path: "/pages/reserve/bind/index?type=1",
			bgColor: "linear-gradient( 154deg, #B6BDFE 0%, #888DF5 100%);",
		},
		// {
		//   name: "选购体验",
		//   path: "",
		//   bgColor: "linear-gradient( 154deg, #FBADA3 0%, #FD61E1 100%);",
		// },
	]);

	// const serviceTypeList = ref(["全部的", "未预约", "已预约", "已体检"]);
	const serviceTypeList = ref(["去预约", "已预约"]);
	const currentService = ref(0);

	const quickList = ref([
		[{
				title: "购买并预约",
				style: "color: #1F5B6C; background: linear-gradient( 134deg, #F2F9FF 0%, #D4F4FF 100%);",
			},
			{
				title: "帮助",
				style: "color: #00746A; background: linear-gradient( 134deg, #F3FFFD 0%, #CAFEF9 100%);",
			},
		],
		[{
				title: "体检前",
				desc: "需要注意什么",
				style: "color: #67231D; background: linear-gradient( 153deg, #FFF9F6 0%, #FAE7E0 100%);",
			},
			{
				title: "体检中",
				desc: "安全更高效",
				style: "color: #72583F; background: linear-gradient( 134deg, #FFFDEF 0%, #FEF8D4 100%);",
			},
			{
				title: "体检后",
				desc: "报告怎么看",
				style: "color: #294728; background: #E8FBDF;",
			},
		],
	]);

	const togglePath = (url) => {
		if (!url) return;
		uni.navigateTo({
			url,
		});
	};

	const myExaminationList = ref([]); // 我的体检服务列表

	const getMyExamination = async () => {
		// const res = await getMyExaminationApi({
		//   status: currentService.value === 0 ? null : currentService.value,
		//   uid: userStore.userInfo.id
		// });
		myExaminationList.value = []
		examination_loading.value = true
		const res = await getMyExaminationApi({
			status: currentService.value + 1,
			uid: userStore.userInfo.id
		});
		myExaminationList.value = res;
		examination_loading.value = false
	};
	const examination_loading = ref(false)
	onShow(async () => {
		await nextTick();
		setTimeout(() => {
			getMyExamination();
		}, 500);
	});

	const changeCurrentService = (index) => {
		currentService.value = index;
		getMyExamination();
	};

	const handleStatus = (status) => {
		switch (status) {
			case 1:
				return "立即预约";
			case 2:
				return "已预约";
			case 3:
				return "已体检";
			default:
				return "获取失败";
		}
	};

	const onClickStatus = (item) => {
		switch (item.status) {
			case 1:
				uni.navigateTo({
					url: `/pages/reserve/select/index?id=${item.id}`
				});
				break;
			case 2:
				// uni.navigateTo({
				//   url: `/pages/case/info/index?id=${item.id}`,
				// });
				uni.navigateTo({
					url: `/pages/case/info/index?id=${item.id}`
				});
				break;
			case 3:
				uni.navigateTo({
					url: `/pages/case/info/index?id=${item.id}`,
				});
				break;
		}
	};

	const addFamily = (item) => {
		uni.navigateTo({
			url: `/pages/reserve/select/index?id=${item.id}`
		});
	};
	const goPath = (url) => {
		uni.navigateTo({
			url
		});
	}
</script>

<template>
	<view class="app-reserve">
		<!-- 登录弹窗 -->
		<!-- <LoginPop ref="loginPopRef" /> -->
		<!-- <view class="type-wrapper">
      <view class="type-item" style="flex:1" v-for="(item, index) in typeList" :key="index" @click="togglePath(item.path)">
        <text class="type-title">{{ item.name }}</text>
        <text class="type-desc">绑定服务卡预约</text>
        <image class="type-icon" :src="imgUrl(`/static/img/imgs/reserve-type${index}.png`)" mode="aspectFit" />
      </view>
    </view> -->

		<text class="app-title">我的体检服务</text>

		<view class="service-wrapper">
			<view class="service-header">
				<view :class="currentService === index ? 'header-active' : ''" v-for="(item, index) in serviceTypeList"
					:key="index" @click="changeCurrentService(index)">{{ item }}</view>
			</view>
			<view class="service-content" v-if="examination_loading">
				<view class="service-item">
					加载中...
				</view>
			</view>
			<view class="service-content" v-else>
				<template v-if="myExaminationList.length">
					<view class="service-item" v-for="(item, index) in myExaminationList" :key="index">
						<view class="item-row">
							<text class="item-title">{{ item.name }}</text>
							<!-- <text class="item-add" v-if="item.status === 1" @click="addFamily(item)">添加亲属</text> -->
							<!-- <text class="item-add" v-if="item.status === 2" @click="onClickStatus(item)">查看预约</text> -->
						</view>
						<text class="item-desc">{{ item.planname }}</text>
						<view class="item-row">
							<text class="item-date">使用期限: {{ item.checkenddate }}前</text>
							<template v-if="item.status === 1">
								<view class="item-button" @click="onClickStatus(item)">{{handleStatus(item.status)}}
								</view>
							</template>
							<template v-else>
								<view class="item-button" v-if="item.status === 2" style="margin-right:10rpx"
									@click="onClickStatus(item)">
									查看预约
								</view>
								<view class="item-button">{{handleStatus(item.status)}}</view>
							</template>
						</view>
					</view>
				</template>

				<view class="content-empty" v-else>
					<text>暂无服务，快去绑定吧</text>
					<view class="empty-button" @click="goPath('/pages/reserve/bind/index?type=1')">点击绑定</view>
				</view>
			</view>
		</view>
		<template v-if="currentService==0">
			<view class="bind-button" @click="goPath('/pages/reserve/bind/index?type=1')">去预约</view>
		</template>
		<view style="display:none">
			<template v-if="showQuick">
				<text class="app-title">快速预约</text>

				<view class="row-wrapper">
					<view class="row-item" v-for="(item, index) in quickList[0]" :key="index" :style="item.style">
						<text>{{ item.title }}</text>
					</view>
				</view>

				<view class="row-wrapper">
					<view class="step-item" v-for="(item, index) in quickList[1]" :key="index" :style="item.style">
						<text class="step-title">{{ item.title }}</text>
						<text class="step-desc">{{ item.desc }}</text>
						<view class="step-button">点击查看</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="bind-button" @click="goPath('/pages/reserve/bind/index?type=1')">去预约</view>
			</template>
		</view>

	</view>
</template>

<style src="./style.scss" scoped />